<template>
	<view>
		<!-- Tabs -->
		<view class="tabs">
			<!-- <image  @tap="toHome" class="icon" src="/static/icons/arrow-left.png"></image> -->

			<view class="tab" :class="{ active: activeTab === 'details' }" @click="activeTab = 'details'">
				明细
			</view>
			<view class="tab" :class="{ active: activeTab === 'settings' }" @click="activeTab = 'settings'">
				设置
			</view>
		</view>

		<view class="transaction-details">


			<!-- Tab Content -->
			<view v-if="activeTab === 'details'" class="transaction-list">
				<!-- Transaction List -->
				<view class="transaction-item" v-for="(transaction, index) in transactions" :key="index">
					<view class="row">
						<text class="label">用户昵称：</text>
						<text class="value">{{ transaction.user.nickname }}</text>
					</view>
					<view class="row">
						<text class="label">支付类型：</text>
						<text class="value">{{ transaction.pay_type_text }}</text>
					</view>
					<view class="row">
						<text class="label">交易时间：</text>
						<text class="value">{{ transaction.paytime_text }}</text>
					</view>
					<view class="row">
						<text class="label">交易金额：</text>
						<text class="value">{{ transaction.total_fee }}</text>
					</view>
				</view>
			</view>

			<view v-if="activeTab === 'settings'" class="transaction-list">
				<!-- Transaction List -->

				<view class="transaction-item" v-for="(card, index) in cards" :key="index">

					<view class="row">
						<text class="label">面值：</text>
						<text class="value">{{ card.facevalue }}</text>
					</view>
					<view class="row">
						<text class="label">售价：</text>
						<text class="value">{{ card.buyprice }}</text>
					</view>
					<view class="row">
						<text class="label">所属门店：</text>
						<text class="value">{{ card.store.name }}</text>
					</view>
				</view>


			</view>



			<view class="container">

				<view class="add-button-container">
					<view class="add-button" @click="openPopup">添加</view>
				</view>
			</view>
		</view>
		<recharge-add :show="isPopupVisible" @update:show="val => isPopupVisible = val"></recharge-add>
	</view>
</template>


<script>
	import {
		mapState
	} from 'vuex';
	import rechargeAdd from './components/rechargeAdd.vue';
	export default {
		components: {
			rechargeAdd
		},
		data() {
			return {
				isPopupVisible: false,
				activeTab: 'details', // Active tab state
				transactions: [],
				cards: []
			};
		},
		computed: {
			...mapState(['common'])
		},
		onPullDownRefresh() {
			this.loadData();
		},
		onShow() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.loadData();
			this.loadUserData();
		},
		methods: {
			toHome(){
				uni.navigateTo({
					url:'/pages/store/store'
				})
			},
			openPopup() {
				this.isPopupVisible = true;
			},
			closePopup() {
				this.isPopupVisible = false;
			},
			loadData() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.get({
						url: '/Recharge/lists',
						loadingTip: '加载中...',
						data: {
							store_id: store_id,
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.isLoading = false;
							this.cards = res;
							console.log(res)
						}
					});
				})

			},
			loadUserData() {
				this.$api.post({
					url: '/Recharge/RechargeLists',
					loadingTip: '加载中...',
					data: {
						store_id: 1,
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.isLoading = false;
						this.transactions = res;
						console.log(this.transactions)
					}
				});
			},
		}
	};
</script>


<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.icon {
		color: #000;
		width: 44rpx;
		/* Adjust size of the icon */
		height: 44rpx;
		margin-left: 10px;
		margin-top: 10px;
		/* Space between icon and the start of the row */
	}

	.add-button-container {
		position: fixed;
		/* Stays in place at the bottom */
		bottom: 20px;
		/* 20px from the bottom */
		display: flex;
		/* Flexbox layout */
		justify-content: center;
		/* Center horizontally */
		align-items: center;
		/* Align center vertically */
		z-index: 10;
		/* Ensure it appears above other elements */
	}

	.add-button {
		width: 690rpx;
		/* Button width */
		height: 95rpx;
		/* Button height */
		line-height: 95rpx;
		/* Vertically center text inside the button */
		background-color: #65C61D;
		/* Green background color */
		color: #fff;
		/* White text color */
		font-size: 36rpx;
		/* Font size for button text */
		border-radius: 20rpx;
		/* Rounded corners */
		text-align: center;
		/* Center text horizontally */
		cursor: pointer;
		/* Indicate clickability */
	}

	.transaction-details {
		padding: 10px;
		background-color: #f5f5f5;
		height: 100vh;
	}

	.tabs {
		display: flex;
		/* border-bottom: 1px solid #ccc; */
		margin-bottom: 10px;
		background-color: #fff;
		/* Set background color for the tabs */
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 10px;
		font-size: 16px;
		color: #666;
	}

	.tab.active {
		color: #007aff;
		font-weight: bold;
		border-bottom: 1px solid #007aff;
		/* Adjusted border-bottom to be shorter */
		width: 113rpx;
		/* Shortened the width of the active tab's border */
	}



	.transaction-list {
		/* background-color: #fff; */
		padding: 10px;
		border-radius: 8px;
	}

	.transaction-item {
		margin-bottom: 23rpx;
		/* Add spacing between items */
		background-color: #fff;
		/* Optional: Light background color for each block */
		border: 1px solid #eee;
		/* Optional: Light border for separation */
		border-radius: 8px;
		/* Optional: Rounded corners for blocks */
		padding: 15px;
		/* Padding inside each block */
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		/* Optional: Subtle shadow for better distinction */
	}

	.transaction-item:last-child {
		margin-bottom: 0;
		/* Remove spacing after the last item */
	}

	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.label {
		font-size: 16px;
		color: #666;
	}

	.value {
		font-size: 16px;
		color: #333;
		flex: 1;
		text-align: right;
		/* Ensure values align to the right */
	}


	.arrow {
		font-size: 18px;
		color: #999;
		margin-left: 10px;
	}

	.photo-upload {
		width: 50px;
		height: 50px;
		border: 1px dashed #ccc;
		border-radius: 4px;
		text-align: center;
		line-height: 50px;
		font-size: 24px;
		color: #999;
	}

	.description-input {
		width: 100%;
		height: 100px;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 10px;
		font-size: 14px;
		color: #333;
	}
</style>